
<template>
  <!-- 代理点 -->
  <div>
    <FCForm
      v-bind="queryForm"
      :dataset="dateset"
      :controls="formControls"
    ></FCForm>
    <FCTable
      :fields="fields"
      :dataset="dateset1"
      :scroll="{
        y: '200px',
      }"
      :customRow="customRow"
    ></FCTable>
  </div>
</template>
<script>
import FCForm from '@/vendors/fc-ui/src/form/FCForm.vue'
import FCTable from '@/vendors/fc-ui/src/table/FCTable.vue'
import FCDataset from '@/vendors/fc-dataset/FCDataset'
import { getProxyPoint } from '@/apis/centralizedPaymentApi'
export default {
  name: 'modalB',
  components: {
    FCForm,
    FCTable,
  },
  data() {
    const dateset = new FCDataset({
      fields: [
        { name: 'classescode', type: 'string' },
        { name: 'classescodename1', type: 'string' },
      ],
      datas: [],
    })
    const dateset1 = new FCDataset({
      fields: [
        { name: 'classescode', type: 'string' },
        { name: 'classescodename1', type: 'string' },
      ],
      datas: [],
    })
    return {
      dateset,
      dateset1,
      queryForm: {
        cols: 2,
        fields: [
          {
            name: 'subcompany',
            title: '分公司',
            controlType: 'select',
            rules: [{ required: true }],
            controlProps: {
              optionsApi: async () => {
                return [
                  { value: '3010100', label: '上海分公司' },
                  { value: '2010100', label: '江苏分公司' },
                  { value: '1010100', label: '浙江分公司' },
                ]
              },
            },
          },
          {
            name: 'classescode',
            title: '代号',
            controlType: 'input',
          },
          {
            name: 'classescodename1',
            title: '名称',
            controlType: 'input',
          },
        ],
      },
      fields: [
        {
          title: '代号',
          name: 'classescode',
          width: 200,
          ellipsis: true,
        },
        {
          title: '名称',
          name: 'classescodename1',
          width: 200,
          ellipsis: true,
        },
      ],
      resultData: [],
      index: null,
      record: null,
      loading: false,
    }
  },
  computed: {
    formControls() {
      return [
        {
          title: '查询',
          buttonType: 'primary',
          loading: this.loading,
          onClick: () => {
            this.query()
          },
        },
      ]
    },
  },
  methods: {
    async query() {
      this.index = null
      this.dateset1.clear()
      this.loading = true
      this.resultData = await getProxyPoint()
      this.loading = false
      const { data = [] } = this.resultData?.data
      data.forEach((item) => {
        this.dateset1.addRecord(item)
      })
    },
    customRow(record, index) {
      return {
        style: {
          'background-color': index === this.index ? '#e6f7ff' : '',
        },
        on: {
          click: () => {
            this.index = index
            this.$emit('handleClick', record)
          },
        },
      }
    },
  },
}
</script>

<style lang="less" scoped></style>
